<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="d:\useful\技能\web\sunrise-web\2023\task\task5\16-综合案例-小黑记事本\css\index.css" />
<title>记事本</title>
</head>
<body>
    
    <section id="app">
        <header class="header">
            <h1>小黑记事本</h1>
            <input v-model="todoName" placeholder="请输入任务" class="new-todo" />
            <button @click="add" class="add">添加任务</button>
        </header>
        <!--列表区域-->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item,index) in list" :key="item.id">
                    <div class="view">
                        <span class="index">{{index+1}}.</span><label>{{ item.name }}</label>
                        <button @click="del(item.id)" class="destroy"></button>
                    </div>
                </li>
                
            </ul>
        </section>
        <!--统计和清空-->
        <footer class="footer" v-show="list.length > 0">
            <!--统计-->
            <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
            <!--清空-->
            <buttom @click="clear" class="clear-completed">
                清空任务
            </buttom>
        </footer>
    </section>
    <!--底部-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //添加
        //1.通过v-model 绑定 输入框->实时获取表单元素的内容
        //2.点击按钮，进行新增，往数组的最前面加 unshift
        const app=new Vue({
            el:'#app',
            data:{
                todoName: '',
                list:[
                    {id: 1,name:'跑步一公里'},
                    {id: 2,name:'跳绳200次'},
                    {id: 3,name:'游泳100米'},
                ]
            },
            methods:{
                del (id){
                    //console.log(id)=>fliter 保留所有不等于该id的项
                    this.list=this.list.fliter(item => item.id !==id)
                },
                add () {
                    if(this.todoName.trim()===''){
                        alert('请输入任务名称')
                        return
                    }
                    this.list.unshift({
                        id: +new Date(),
                        name: this.todoName
                    })
                    this.todoName =''
                },
                clear () {
                    this.list = []
                }
            }
        })
        //1.列表渲染 v-for key的设置 {{}}插值表达式
        //2.删除功能 v-on 调用传参 filter过滤 覆盖修改原数组
        //3.添加功能 v-model 绑定 unshift 修改原数组添加
        //4.底部统计和清空 (1)数组.length累计长度(2)覆盖数组清空列表(3)v-show控制隐藏
    </script>
</body>
</html>
